import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Input from './components/input'
import List from './components/list'
class App2 extends React.Component {
  state = {
    todo: '',
    list: [{ id: 1, text: '测试' }]
  }
  add = () => {
    console.log("新增")
    this.setState({
      todo: '',
      list: [{ id: Math.random(), text: this.state.todo }, ...this.state.list]
    })
  }
  del = (id) => {
    console.log(id)
    this.setState({
      list: this.state.list.filter(item => item.id != id)
    })
  }
  render() {
    let { todo, list } = this.state;
    return <div className=''>
      <Input value={todo} onChange={e => this.setState({ todo: e.target.value })} onPressEnter={this.add} />
      <List data={list} onDel={this.del}></List>
    </div>;
  }
}
function App() {
  let [todo, setTodo] = useState('')
  let [list, setList] = useState([
    {
      id: 1,
      text: '测试'
    }
  ])
  const del = (id) => {
    // console.log(id)
    setList(list.filter(item => item.id != id))
  }
  const add = () => {
    console.log('新增')
    setList([{ id: Date.now(), text: todo }, ...list])
    setTodo('')
  }
  return <>
    <Input value={todo} onChange={e => setTodo(e.target.value)} onPressEnter={add} />
    <List data={list} onDel={del}></List>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))